import React, { Component, Fragment } from 'react'
import './App.css'
import { connect } from 'react-redux'

class App extends Component {
	constructor(props) {
		super(props)
	}

	render() {
		return (
			<Fragment>
				<div className="App">
					<div className="header">
						<input
							type="text"
							placeholder="todolist"
							onKeyDown={(event) => {
								if (event.keyCode === 13) {
									// console.log(event.target.value);
									let value = event.target.value
									if (value === '') {
										return alert('内容不能为空！')
									}
									//组装todo对象
									let todo = {
										val: value,
										status:"0", //0为未完成
									}
									this.props.addTodo({
										type: 'add',
										todo: todo,
									})
									event.target.value = ''
								}
							}}
						/>
					</div>
					<div className="main">
						<ul className="uu">
							{this.props.todos.map((item, index) => {
								return 	<li key={index}>
								<input type="checkbox" checked={item.status==="0"?false:true}
                onChange={(event)=>{
                  let checked = event.target.checked;
                  // console.log(checked);
                  this.props.changeTodoStatus({
                    type:"changestatus",
                    todo:item,
                    checked:checked
                  })

                }}
                
                /> <span>{item.val}
                
                </span>
								<button onClick={()=>{
                    this.props.deleteTodo({
                      type:"delete",
                      todo:item
                    })
                  }}>删除</button>
							</li>
							})}

						
						</ul>
					</div>

					<div className="tab">
						<ul>
							<li onClick={()=>{
                this.props.all({
                  type : 'all'
                })
              }}>全部</li>
							<li onClick={()=>{
              this.props.showUnderway({
                type:"underway"
              })
            }}>正在进行</li>
							<li onClick={()=>{
              this.props.showFinished({
                type:"fininshed"
              })
            }}>已完成</li>
							<li onClick={()=>{

                this.props.delAll({
                  type : "delAll"
                })
              }}
              
              
              >全部删除</li>
						</ul>
					</div>
				</div>
			</Fragment>
		)
	}
}

function mapStateToProps(rootReducer) {
	return {
		todos: rootReducer.todoReducer.showTodos,
	}
}

function mapActionToProps(dispatch) {
	return {
		addTodo: (action) => {
			dispatch(action)
    },
    changeTodoStatus:(action)=>{dispatch(action)},
    deleteTodo:(action)=>{dispatch(action)},
    all:(action)=>{dispatch(action)},
    showUnderway:(action)=>{dispatch(action)},
    showFinished:(action)=>{dispatch(action)},
    delAll:(action)=>{dispatch(action)}
	}
}

export default connect(mapStateToProps, mapActionToProps)(App)
